<template>
  <div class="app-container">

    <div class="container_wrap">

      <div class="con_tit">
        数据报表-月报表
      </div>
      <div class="table_wrap">

        <div class="select_wrap">

          <!-- 选择月份 -->
          <div class="input_con" style="width: 8%;">
              <el-date-picker
                  v-model="valueMonth"
                  type="month"
                  value=""
                  placeholder="选择月"
                  :picker-options="pickerOptions0"
                  >
                </el-date-picker>
          </div>

          <!-- 查询按钮 -->
          <div class="btn_con">
            <el-button class="checkdata" @click="subdata" type="primary" :loading="loadingbtn">{{ loadingbuttext }}</el-button>
          </div>

          <!-- 导出Excel -->
          <div class="btn_con">
            <el-button class="checkdata"  type="primary" plain size="mini" @click="exportOrderData()">导出Excel</el-button>
          </div>

        </div>


        <div style="display: none;">
          <el-table :data="usedata" stripe style="width: 100%" :cell-style="{bdeviceCodeackground:'#08182C'}" id="out-table">
              <el-table-column prop="id" label="序号" width="60">
              </el-table-column>
              <el-table-column prop="deviceName" label="设备名称" width="270">
              </el-table-column>
              <el-table-column prop="positiveKWh" label="柴油机总发电量" width="250">
              </el-table-column>
              <el-table-column prop="dPlus" label="柴油机总耗油量">
              </el-table-column>
              <!-- <el-table-column prop="oilConsumption" label="柴油机日发电量油耗" width="150">
              </el-table-column> -->
              <el-table-column prop="tpap" label="负载总用电量" width="200">
              </el-table-column>
              <el-table-column prop="runTimeNum" label="月总运行日" width="200">
              </el-table-column>
              <el-table-column prop="runTimeDetailDay" label="月具体运行时间" width="400">
              </el-table-column>
          </el-table>
        </div>

        <div class="table_con">
            <el-table :data="fenyelist" stripe style="width: 100%" :cell-style="{bdeviceCodeackground:'#08182C'}" id="out-table">
              <el-table-column prop="id" label="序号" width="60">
              </el-table-column>
              <el-table-column prop="deviceName" label="设备名称" width="200">
              </el-table-column>
              <el-table-column prop="positiveKWh" label="柴油机总发电量" width="180">
              </el-table-column>
              <el-table-column prop="dPlus" label="柴油机总耗油量" width="180">
              </el-table-column>
              <!-- <el-table-column prop="oilConsumption" label="柴油机日发电量油耗" width="200">
              </el-table-column> -->
              <el-table-column prop="tpap" label="负载总用电量" width="200">
              </el-table-column>
              <el-table-column prop="runTimeNum" label="月总运行日" width="150">
              </el-table-column>
              <el-table-column prop="runTimeDetailDay" label="月具体运行时间">
              </el-table-column>
            </el-table>

        </div>

        <div class="table_page">
            <div class="block">
              <el-pagination background @current-change="handleCurrentChange"
                :page-size="pagesize"
                layout="total, prev, pager, next"
                :total="datalength">
              </el-pagination>
            </div>
        </div>

      </div>


    </div>


  </div>
</template>

<script>
import store from '@/store'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import { getMonthSearch  } from '@/api/report.js'
export default {
  name: 'ReportMonth',
  data() {
    return {
      loadingbtn:false,   // 按钮加载，
      loadingbuttext:'查 询',

      usedata:[],
      datalength: 0, // 总条数
      pagesize: 10, // 每页显示条数
      curentpage: 1, // 当前页数
      valueMonth: '',
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
        }
      }
    }
  },
  mounted (){

  },
  methods: {
    handleCurrentChange (currentPage){
      this.curentpage = currentPage
    },

    subdata(){
      var _this = this;


      // 非空验证
      if( !_this.valueMonth ){
            _this.$alert('请选择搜索月份', {
              confirmButtonText: '确定',
              center: true
            });
      }else{
        _this.loadingbtn = true;
        _this.loadingbuttext = '查询中...';


        getMonthSearch( _this.fullDate(_this.valueMonth)  ).then( res => {
          console.log(res);
          if(res.success){
            _this.usedata = [];

            if(res.result){
              _this.datalength = res.result.length;
              res.result.forEach( (val,item) => {
                _this.usedata.push({
                  id: item + 1,
                  deviceName: val.deviceName,
                  positiveKWh: val.positiveKWh,
                  dPlus: val.dPlus,
                  // oilConsumption: val.oilConsumption,
                  tpap: val.tpap,
                  runTimeNum: val.runTimeNum,
                  runTimeDetailDay: val.runTimeDetailDay
                })
              });
            }else{
              _this.datalength = 0;
            }
            this.loadingbtn = false;
            this.loadingbuttext = '查 询';
          }
        });
      }

    },
    fullDate(date){
      let theyear = date.getFullYear();
      let themonth = date.getMonth() + 1;
      return theyear + '-' + themonth + '-' + '01'
    },
    fullDateNotDay(date){
      let theyear = date.getFullYear();
      let themonth = date.getMonth() + 1;
      return theyear + '-' + themonth
    },

    // 下载excel
    exportOrderData() {
      var xlsxParam = { raw: true };
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'),xlsxParam);
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
      FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), this.fullDateNotDay(this.valueMonth) + '月报表.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
      return wbout
    },


  },
  computed:{
    fenyelist(){
      return this.usedata.slice( (this.curentpage-1)*this.pagesize, this.curentpage*this.pagesize )
    }

  }
}
</script>


<style lang="scss" scoped>
.app-container{
  top:0;
  .container_wrap{
    width:100%;
    height:100%;
    border:1px solid #043A5F;
    background:#08182C;
    .con_tit{
      font-family: MicrosoftYaHei;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 1.4px;
      background: #0B1F37;
      height:50px;
      line-height:50px;
      border-bottom:1px solid #043A5F;
      text-indent:1%;
    }
    .table_wrap{

      height: calc( 100% - 50px);
      width:100%;
      padding:40px 40px 0;
      position:relative;

      .select_wrap{
        width:100%;
        height:8%;

        .select_con{
          display:inline-block;
          ::v-deep{
            .el-input__inner{
              height:30px;
              line-height:30px;
              background: #152942;
              border: 1px solid #374766;
              font-size:12px;
              padding:0 0 0 5px;
              color:#fff;
              text-indent:10px;
            }
            .el-input__suffix{
              top:3px;
            }
          }
        }
        .input_con{
          display:inline-block;
          input{
            height:30px;
            line-height:30px;
            background: #152942;
            border: 1px solid #374766;
            font-size:12px;
            padding:0 0 0 10px;
            color:#fff;
            &::placeholder {
              color:rgba(255,255,255,0.7);
            }
            // text-indent:10px;
          }
          ::v-deep{

            .el-input--medium{
              width: 100%;
              .el-input__inner{
                padding: 0 0 0 35px;
              }
              .el-input__icon{
                line-height: 32px;
              }
            }
            .el-input__inner{
              height:30px;
              line-height:30px;
              background: #152942;
              border: 1px solid #374766;
              font-size:12px;
              padding:0 0 0 10px;
              color:#fff;
            }
            .el-input__suffix{
              top:3px;
            }
          }
        }

        .btn_con{
          display:inline-block;
          .checkdata{
            display:inline-block;
            vertical-align: center;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            margin-left:10px;
            padding:0 10px;
            color: #fff;
            background: #0066FF;
            border-radius: 2px;
            letter-spacing: 0.88px;
            line-height:28px;
            cursor:pointer;
          }
        }

        .add_btn{
          float:right;
          .checkdata{
            display:inline-block;
            vertical-align: center;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            margin-left:10px;
            padding:0 10px;
            color: #fff;
            background: #0066FF;
            border-radius: 2px;
            letter-spacing: 0.88px;
            line-height:28px;
            cursor:pointer;
          }
        }
      }





      .table_con{
        height:75%;
        overflow-y:auto;
        ::v-deep{

          // 去掉表格的底边框线
          .el-table::before{
            display:none;
          }

          .el-table{
            table.el-table__header{
              thead.has-gutter{
                font-family: MicrosoftYaHei;
                font-size: 14px;
                color: #73829E;
                letter-spacing: 1.4px;
                tr{
                  th{
                    text-align:center;
                    border:none;
                    background-color: #152A44;
                  }
                }
              }
            }
            table.el-table__body{
              tbody{
                tr.el-table__row{
                  background: #08182C;
                  td{
                    border:none;
                    font-family: MicrosoftYaHei;
                    font-size: 14px;
                    color: #FFFFFF;
                    letter-spacing: 1.4px;
                    text-align:center;
                  }

                }
                tr.el-table__row:hover{
                  td{
                    background: #08182C;
                  }
                }
                tr.el-table__row--striped{
                  td{
                    background: #08182C;
                  }
                }
                tr.el-table__row--striped:hover{
                  td{
                    background:#08182C;
                  }
                }
              }

            }

          }

          // 表格hover
          .el-table--enable-row-hover{
            .el-table__body{
              tr:hover{
                td{
                  background:rgba(255,255,255,0.5) !important;
                }
              }
            }

          }

        }
      }

      // 页码
      .table_page{
        margin-top:10px;
        text-align:center;
        .block{
          display:inline-block;
          ::v-deep{
            .el-pagination.is-background{
              .el-pagination__total{
                // font-family: MicrosoftYaHei;
                font-size: 14px;
                color: #BFC5D1;
                letter-spacing: 1px;
              }

              button{
                border: 1px solid #426A9D !important;
                border-radius: 1px;
                color:#fff;
                background: #08182C;
              }
              button.btn-prev:disabled{
                color:#606266;
              }
              button.btn-next:disabled{
                color:#606266;
              }


              .el-pager{
                li.number{
                  border: 1px solid #426A9D;
                  border-radius: 1px;
                  background:transparent;
                  // font-family: MicrosoftYaHei;
                  font-size: 14px;
                  color: #426A9D;
                  letter-spacing: 1px;
                }
                li.number.active{
                  background: #0066FF;
                  border: 1px solid #0066FF;
                  border-radius: 1px;
                  color: #FFFFFF;
                }
                li.more{
                  background:transparent;
                  color: #426A9D;
                }
              }
            }
          }
        }
      }
    }

  }
}
</style>
